<template>
<q-infinite-scroll  ref="infiniteScroll" @load="onLoad" :offset="5" v-if="!isLoad &&reimburseList.length > 0">
    <q-card v-for="(item, index) in reimburseList" :key="index" class="shadow-6 q-pa-none q-mb-md">
        <q-card-section class="q-pa-none">
            <q-list style="height: 80px" class="q-pa-none">
                <q-item clickable v-ripple style="height: 100%" @click="handleselectreimburse(item.frid)">

                    <q-item-section class="text-subtitle1">
                        <q-item-label :style="$q.platform.is.desktop ? '' : 'max-width:220px'" class="ellipsis" lines="1">
                            【{{ item.type }}】——{{item.remark}}
                        </q-item-label>
                        <q-item-label class="q-mt-sm" :style="$q.platform.is.desktop ? '' : 'max-width:220px'" caption>
                            <div class="column">
                                <div class="">报销金额：{{ item.amount }}</div>
                                <div class="ellipsis">报销单号：{{ item.frid }}</div>
                            </div>
                        </q-item-label>
                    </q-item-section>
                    <q-item-section side>
                        <q-badge v-if="item.status == 0" color="orange-6" outline class="q-ml-sm q-pa-sm q-mr-sm">
                            待审核
                        </q-badge>
                        <q-badge v-if="item.status == 1" color="green" outline class="q-ml-sm q-pa-sm q-mr-sm">
                            已通过
                        </q-badge>
                        <q-badge v-if="item.status == 2" color="red" outline class="q-ml-sm q-pa-sm q-mr-sm">
                            已拒绝
                        </q-badge>
                    </q-item-section>
                </q-item>
            </q-list>
        </q-card-section>
    </q-card>
    <reimburse-detail :isReimDetail="isReimDetail" :frid="frid" @update="handleReimDialog"></reimburse-detail>

    <template v-slot:loading>
        <div class="column justify-center items-center q-my-md">
            <q-spinner-dots color="primary" size="40px" />
            <span class="text-primary q-mb-md">疯狂加载中……</span>
        </div>
    </template>
    <div v-if="noMore" style="height: 50px" class="row items-center justify-center text-grey">
        --暂无更多--
    </div>

</q-infinite-scroll>
</template>

<script>
import {

    getmyreimburse
} from "assets/api/app";
export default {
    components: {
        ReimburseDetail: () => import('pages/app/reimburse/ReimDetail.vue')
    },
    props: {
        noMore: {
            default: false
        },
        reimburseList: {
            default: []
        },
        isLoad:{
          type:Boolean
        }

    },
    mounted(){
        console.log(this.reimburseList);
    },
    data() {
        return {
            isReimDetail: false,
            frid:null
        }
    },
    methods: {
        handleselectreimburse(frid) {
            this.frid = frid;

            this.isReimDetail = true;
        },
        handleReimDialog() {
            this.isReimDetail = false;
        },

        onLoad(index, done) {
            if (!this.noMore) {
                console.log("start load");

                this.$emit('refresh-reimburse');
                setTimeout(() => {
                    done();
                }, 2000);

            } else {
                done(true);
            }
        },
    }
}
</script>

<style>

</style>
